<template>
    <!-- 商品订单管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-row>
                    <el-form-item label="状态：">
                        <el-select v-model="formInline.status" placeholder="请选择" clearable>
                            <el-option label="全部" value=""></el-option>
                            <el-option label="待支付" value="1"></el-option>
                            <el-option label="待核销" value="2"></el-option>
                            <el-option label="已核销" value="3"></el-option>
                            <el-option label="已取消" value="4"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="订单编号：">
                        <el-input v-model="formInline.order_no" placeholder="请输入订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="商品搜索：">
                        <el-input v-model="formInline.goods_name" placeholder="请输入搜索商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="用户手机号搜索：">
                        <el-input v-model="formInline.user_mobile" placeholder="请输入搜索用户手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                    </el-form-item>
                </el-row>

            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData"
                      :summary-method="getSummaries"
                      show-summary
                      max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="订单ID"></el-table-column>
                <el-table-column prop="order_no" align="center" label="订单编号" width="130px"></el-table-column>
                <el-table-column prop="goods_name" align="center" label="商品名称" show-overflow-tooltip></el-table-column>
                <!--                <el-table-column prop="user_nickname" align="center" label="用户昵称"></el-table-column>-->
                <el-table-column prop="user_mobile" align="center" label="用户手机号" width="130px"></el-table-column>
                <el-table-column prop="price" align="center" label="单价"></el-table-column>
                <el-table-column prop="num" align="center" label="数量"></el-table-column>
                <el-table-column prop="total_money" align="center" label="总金额"></el-table-column>
                <el-table-column prop="status_name" align="center" label="状态"></el-table-column>
                <el-table-column prop="created_at" align="center" label="创建日期" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" plain
                                   @click=handlePay(scope.row.id)>支付详情
                        </el-button>
                        <el-button v-if="scope.row.status==2" size="mini" type="danger" plain
                                   @click=handleSend(scope.row.id)>核销
                        </el-button>
                        <el-button v-if="scope.row.status==2 || scope.row.status == 1" size="mini" type="danger" plain
                                   @click=handleCancel(scope.row.id)>取消
                        </el-button>


                        <!--                        <el-button v-if="scope.row.status==2"  size="mini" type="danger" plain-->
                        <!--                                   @click=hand(scope.row.id)>取消订单-->
                        <!--                        </el-button>-->

                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <!--支付详情弹窗 -->
        <el-dialog title="支付详情" :visible.sync="dialogPay">
            <el-form :model="form">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="总金额:" prop="total_money">
                            {{ form.total_money }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="支付金额:" prop="num">
                            {{ form.pay_money }}元
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="支付积分:" prop="price">
                            {{ form.pay_point }}积分
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="积分兑换率：" prop="point_rate">
                            {{ form.point_rate }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="状态" prop="status">
                            {{ form.status_name }}
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关闭</el-button>

            </div>
        </el-dialog>


    </div>
</template>

<script>

export default {
    name: "user_course_info",
    data() {
        return {
            formInline: {
                status: "",
                id: "",
                order_no: "",
                goods_name: "",
                user_mobile: "",
            },
            tableData: [
                {
                    id: 1,
                    name: "社区体能课（周一）",
                    type: "体能课程",
                    image: "/",
                    time: "每星期一17:00~18:00",
                    address: "宝安区四季公园",
                    desc: "这个课程是有助于儿童健康成长",
                    status: 1,
                },
            ],
            id: 0,
            page: 1, //默认第一页
            limit: 15, //默认一页显示10条数据
            total: 0,

            //支付详情

            dialogPay: false,
            form: {
                total_money: 0,
                pay_money: 0,
                pay_point: 0,
                status_name: '',
            },
            dataTotal:[],

        };
    },
    created() {
        this.formInline.course_id = this.$route.query.course_id;
        this.formInline.order_no = this.$route.query.order_no;
        this.getGoodsOrderList();
    },
    activated() {
        this.formInline.course_id = this.$route.query.course_id;
        this.formInline.order_no = this.$route.query.order_no;
        this.getGoodsOrderList();
    },
    methods: {
        getSummaries(param)
        {
            const sums =[];
            sums[0]='总计';
            sums[5]=this.dataTotal.num;
            sums[6]=this.dataTotal.total_money;

            return sums;
        },
        getGoodsOrderList() {
            let params = {
                page: this.page,
                per_page: this.limit,
                status: this.formInline.status,
                order_no: this.formInline.order_no,
                goods_name: this.formInline.goods_name,
                mobile: this.formInline.user_mobile,
            };
            this.$get(this.$api.goodsOrderApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list.data;
                    this.total = res.data.list.total;
                    if(this.page !=1){
                        this.dataTotal = [];
                    }else{
                        this.dataTotal = res.data.total;
                    }
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },

        forEachFun(str) {
            let ids = [];
            if (str.length > 0) {
                ids = str.split(",");
                ids.forEach((item, index) => {
                    ids[index] = parseInt(ids[index])

                });
            }
            return ids;

        },

        // 确认核销
        handleUsed(row) {
            this.$confirm("此操作将核销此节课, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$put(this.$api.userCourseApi + '/' + row.id).then((res) => {
                        if (res.code == 200) {
                            this.getGoodsOrderList();
                            return this.$message.success("已核销！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        // 拒绝退款

        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getGoodsOrderList();
        },
        handleCurrentChange(index) {
            this.page = index;
            this.getGoodsOrderList();
        },


        // 点击查询按钮
        submitForm() {
            this.getGoodsOrderList();
        },

        // 点击跳转至退款页面
        goToRefund(id) {
            this.$router.push({path: '/refund', query: {order_no: id}})
        },
        // 支付详情
        handlePay(id) {
            this.dialogPay = true;
            this.$get(this.$api.goodsOrderApi + '/' + id, {}).then((res) => {
                if (res.code == 200) {
                    this.form.total_money = res.data.total_money;
                    this.form.pay_money = res.data.pay_money;
                    this.form.pay_point = res.data.pay_point;
                    this.form.point_rate = res.data.point_rate;
                    this.form.status_name = res.data.status_name;

                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        handleSend(id) {

            this.$confirm("确定核销么?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$put(this.$api.goodsOrderApi + '/' + id, {status: 3}).then((res) => {
                        if (res.code == 200) {
                            this.getGoodsOrderList();
                            return this.$message.success("已取消！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });

        },
        cancel() {
            this.dialogPay = false;

        },
        handleCancel(id) {
            this.$confirm("此操作将取消此订单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$put(this.$api.goodsOrderApi + '/' + id, {status: 4}).then((res) => {
                        if (res.code == 200) {
                            this.getGoodsOrderList();
                            return this.$message.success("已取消！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },


    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.is-selected {
    color: #1989fa;
}
</style>
